<template>
  <div>
    <div class="mend-list-container">
      <div class="client-header">
        <div class="client-header-title mend-information-title">维修信息</div>
      </div>
      <a-list item-layout="horizontal" :data-source="mendList" class="list-container">
        <a-list-item slot="renderItem" slot-scope="item, index">
          <div class="list-container-left">
            <a-list-item-meta :description="item.info.record"
            >
              <span slot="title">{{ item.info.time }}</span>
              <a-avatar slot="avatar"
                        src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
              />
            </a-list-item-meta>
          </div>
          <div class="list-container-right">
            <a-upload class="upload-mend-container" list-type="picture-card"
                      :file-list="item.picture" @preview="handlePreview">
            </a-upload>
          </div>
        </a-list-item>
      </a-list>
    </div>
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </div>
</template>

<script>
  function getBase64 (file) {
    return new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => resolve(reader.result);
      reader.onerror = error => reject(error);
    });
  }
  import api from '@/server/userConfig';
  import GLOBAL from "@/api/global_variable"
  export default {
    name: "MendList",
    data () {
      return {
        mendList: [],
        previewVisible: false,
        previewImage: '',
      }
    },
    methods: {
      // 获取维修信息;
      async getMendList (saleNumber) {
        const res = await api.reqGetMendList({afterSaleNumber: saleNumber});
        if (res.MsgCode !== 0) {
          return
        }
        const result = res.Data;
        for (let i = 0; i < result.length; i++) {
          if (result[i].picture.length > 0) {
            for (let j = 0; j < result[i].picture.length; j++) {
              result[i].picture[j].url = GLOBAL.imgDownUrl + result[i].picture[j].pictureUrl;
              result[i].picture[j].uid = -j;
              result[i].picture[j].name = 'image.png';
              result[i].picture[j].status = 'done';
            }
          }
        }
        //console.log(result);
        // this.mendList = result.map((item) => {
        //   return {
        //     info: {
        //       time: item.info.time,
        //       record: item.info.record,
        //     },
        //     picture: item.picture
        //   }
        // })
        this.mendList = result.map((item) => ({
            info: {
              time: item.info.time,
              record: item.info.record,
            },
            picture: item.picture
          })
        )
      },
      handleCancel () {
        this.previewVisible = false;
      },
      async handlePreview (file) {
        console.log(file);
        if (!file.url && !file.preview) {
          file.preview = await getBase64(file.originFileObj);
        }
        this.previewImage = file.url || file.preview;
        this.previewVisible = true;
      },
    },
    mounted () {
      const { saleNumber } = this.$route.params;
      this.getMendList(saleNumber);
    }
  }
</script>

<style scoped="scoped">
  @import "./style.css";
</style>
